import React,{ Component } from 'react';

// 倒计时 state的用法
class Clock extends Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
    tick(){
        this.setState({
            date: new Date
        })
    }

    componentDidMount() {
        this.timerId = setInterval(
            () => this.tick(),1000
        )
    }

    componentWillUnmount() {
        clearInterval(this.timerId);
    }

    render(){
        const date= this.state.date;
        return (
            <div>
                <p>你好李莹莹！</p>
                <p>现在的时间是 {date.toLocaleTimeString()}</p>
            </div>
        )
    }
}

//按钮切换Toggle
class Toggle extends Component{
    constructor(props){
        super(props);
        this.state = {
            isToggleOn:true,
        }
    }
    handleClick = () => {
        this.setState(state =>({
            isToggleOn:!state.isToggleOn
        }))
    }

    render(){
        const isToggleOn = this.state.isToggleOn
    return (
        <p>
            <button onClick={this.handleClick}>
                {isToggleOn ? 'ON' : 'OFF'}
            </button>
            {isToggleOn ? '你要打开吗？' : '你要关闭吗？'}
        </p>

    )}


}

//显示和隐藏
function LogoutDom(props){
    return(
        <div><p>欢迎你李莹莹</p> <p><button onClick={props.onClick}>退出</button></p></div>
    )
}
function LoginDom(props){
    return(
        <div><p>李莹莹请登录</p> <p><button onClick={props.onClick}>登录</button></p></div>
    )
}
class LoginControl extends React.Component{
    constructor(props) {
        super(props);
        this.state = {isLogin:false}
    }
    handleClick = ()=>{
        this.setState(state=>({
            isLogin: !state.isLogin,
        }))
    };
    render(){
        const isLogin = this.state.isLogin;
        let dom = '' ;
        if(isLogin){
            dom = <LogoutDom onClick={this.handleClick}/>
        }else{
            dom = <LoginDom onClick={this.handleClick}/>
        }
        return(
            <div>
                {dom}
            </div>
        )
    }
}
 //条件渲染
function Mailbox(props){
   const unreadMessages = props.unreadMessages;
   return(
       <div>
           <h1>Hello!</h1>
           {unreadMessages.length > 0 &&
            <h2>You have {unreadMessages.length} unread messages.</h2>
           }
       </div>
   )
}

//列表
function NumberList(props) {
    const numbers = props.numbers;
    const listItems = numbers.map((number) =>
        <li key={number}>{number}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
}



function Boiling(props){
    if(props.cel >= 100){
        return (
            <p>水烧开了哦！</p>
        )
    }
    return (
        <p>不要着急，水还没烧开了哦！</p>
    )
}
class Temp extends React.Component{
    constructor(props){
        super(props);
        this.state = {temp:'37'}
    }
    handleChange = e =>{
        this.setState({temp: e.target.value})
    };
    render(){
        const temp = this.state.temp;
        return(
            <div>
                <fieldset>
                    <legend>请输入温度（摄氏度）：</legend>
                    <input type="text" value={temp}
                           onChange={this.handleChange} />
                    <Boiling cel = {parseFloat(temp)} />
                </fieldset>

            </div>
        )
    }
}


class Input extends Component {
    constructor(props){
        super(props);
        this.focus = this.focus.bind(this)
    }
    focus(){
        this.textInput.focus();
    }

    render(){
        return (
            <div>
                <input ref={(input) => { this.textInput = input }} />
                <button  onClick={this.focus}>让input获取焦点</button>
            </div>
        )
    }
}



class CustomForm extends Component {
    handleSubmit = () => {
        console.log("Input Value: ", this.input.value)
    }
    render () {
        return (
            <form onSubmit={this.handleSubmit}>
                <input
                    type='text'
                    ref={(input) => this.input = input} />
                <button type='submit'>Submit</button>
            </form>
        )
    }
}


class Thermometer extends Component{
    render(){
        const numbers = [1, 2, 3, 4, 5];
        const messages = ['React', 'Re: React', 'Re:Re: React'];
        return(
            <div>
                <Temp scale="c" />
                <Temp scale="f" />
                <Clock />
                <Toggle />
                <LoginControl />
                <Mailbox unreadMessages={messages} />
                <NumberList numbers={numbers} />
                <Input />
                <CustomForm />
            </div>
        )
    }
}
export default Thermometer;